<template>
  <div class="c-SearchPage">
    <div class="c-SearchPage_ConditionPanel">
      <div class="searchForm">
        <el-form
          :model="searchFormData"
          ref="searchFormRef"
          label-width="60px"
          inline
        >
          <el-form-item prop="name" label="姓名">
            <el-input v-model="searchFormData.name"></el-input>
          </el-form-item>
          <el-form-item prop="name" label="生日">
            <el-date-picker v-model="searchFormData.birthday"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="() => onSearch(1)">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="searchFormContent">
        {{ searchFormData }}
        <el-button @click="onEventBus">触发事件总线</el-button>
        <el-button @click="onLogout">退出</el-button>
      </div>
    </div>
    <div class="c-SearchPage_MainPanel">
      <PageTable
        :page-index="pageResult.pageNumber"
        :list="pageResult.list"
        :total="pageResult.total"
        @currentChange="onSearch"
      ></PageTable>
    </div>
  </div>
</template>

<script>
import PageTable from "@/components/PageTable";
import { EventBus } from "@/event-bus";
/**
 * mock指定数量的数据
 * @param count 数据数量
 * @return {{birthday: string, name: string, male: number}[]}
 */
function mockTableData(count, startIndex) {
  return Array.from({ length: count }, (v, i) => ({
    name: `张-${i + startIndex}`,
    birthday: "2020-01-01",
    male: 1,
  }));
}
function mockPageResult(pageNumber) {
  let list = [];
  let startIndex = (pageNumber - 1) * 10;
  if (pageNumber === 3) {
    list = mockTableData(5, startIndex);
  } else {
    list = mockTableData(10, startIndex);
  }
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve({
        total: 25,
        list,
        pageNumber,
      });
    }, 500)
  );
}
export default {
  name: "SearchPage",
  components: {
    PageTable,
  },
  data() {
    return {
      searchFormData: {
        name: null,
        birthday: null,
      },
      pageResult: {
        list: [],
        total: 0,
        pageNumber: 1,
      },
    };
  },
  created() {
    this.onSearch(1);
  },
  methods: {
    onLogout() {
      localStorage.removeItem("isLogin", false);
      this.$router.push({ name: "Login" });
    },
    onEventBus() {
      EventBus.$emit("searchPageEvt", "查询列表页事件");
    },
    async onSearch(pageNumber) {
      const resp = await mockPageResult(pageNumber);
      console.log("resp", resp);
      this.pageResult = resp;
    },
    onReset() {
      this.$refs.searchFormRef.resetFields();
      this.onSearch(1);
    },
  },
};
</script>

<style scoped lang="scss">
.c-SearchPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  &_ConditionPanel {
    display: flex;
  }
  &_MainPanel {
    flex: 1;
  }
}
</style>
